<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<html>
    <script type="text/javascript">
        var open_cur = 0;
        $j = jQuery.noConflict();
         $j(document).ready(function(){
             start = $j('#start').val();
             end = $j('#end').val();
             link = window.location.pathname.split("#");
             current = $j('#current').val();
  
             total = $j('#page').val();
              $j('.page-element').append('Tổng số <font style="color:red">'+$j('#row').val()+'</font>  ');
             $j('.page-element').append('<a href="'+link[0]+'?p='+1+'">'+"<<"+' </a>');
             if(current > 1){
             $j('.page-element').append('<a href="'+link[0]+'?p='+(current-1)+'">'+"<"+' </a>');
             }

             while (parseInt(start) <= parseInt(end))
              {
                    style="";
                    if(parseInt(start) == parseInt(current)){
                        style="black";
                    }
                    $j('.page-element').append('<a class="'+style+'" href="'+link[0]+'?p='+start+'">'+start+' </a>');
                    start++;
              }

             if(parseInt(current) < parseInt(total)){
                $j('.page-element').append('<a href="'+link[0]+'?p='+(parseInt(current)+1)+'">'+   '>'+     ' </a>');
             }
             if(total > 0){
             $j('.page-element').append('<a href="'+link[0]+'?p='+total+'">'+">>"+' </a>');
             }else{
                 $j('.page-element').append('<a href="'+link[0]+'?p='+(parseInt(total)+1)+'">'+">>"+' </a>');
             }


         });


    </script>
    <style type="text/css">
        .page-element a{
                border: 1px solid #82A6C7;
                color: #266DB3;
                cursor: pointer;
                display: inline-block;
                line-height: 20px;
                padding: 0 11px;
        }
         .page-element .black{ color:black !important; font-weight: bold}

    </style>
    <body>
        <div style=" color:#266DB3" class="page-element">
        </div>
        <input type="hidden" value="<h:outputText value='#{CustomerBean.startpage}'  />" id="start"/>
        <input type="hidden" value="<h:outputText value='#{CustomerBean.endpage}'  />" id="end"/>
         <input type="hidden" value="<h:outputText value='#{CustomerBean.current}'  />" id="current"/>
         <input type="hidden" value="<h:outputText value='#{CustomerBean.totalpage}'  />" id="page"/>
         <input type="hidden" value="<h:outputText value='#{CustomerBean.totalrow}'  />" id="row"/>

    </body>
</html>